<template>
  <view>
    <text class="text">温馨提示：点击即可进入每一项的学习</text>
    <view class="list_box">
      <view class="viewport_list" v-for="(option,index) in options" :key="index">
        <view class="list">
          <navigator hover-class="none" class="item" :url="option.url">
            <text class="iconfont icon-shu"></text>
            <text class="text_box">{{ option.id }}.{{ option.name }}</text>
            <text class="iconfont icon-circle-right"></text>
          </navigator>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import {ref,reactive,computed} from 'vue'
const options = reactive([
  {
    id:1,
    name:'视频学习',
    url:'',
    icon1:'',
    icon2:'iconfont icon-arrow'
  },
  {
    id:2,
    name:'图片学习',
    url:'',
    icon1:'',
    icon2:'iconfont icon-arrow'
  },
  {
    id:3,
    name:'文章学习',
    url:'',
    icon1:'',
    icon2:'iconfont icon-arrow'
  }
])
</script>

<style lang="scss" scoped>
page{
  background-color: #fff;
}
.text{
  color: red;
  margin-left: 50rpx;
  font-size: 25rpx;
}
.list_box{
  margin-top: 20rpx;
  .viewport_list {
  padding: 20rpx;
}
/* 列表 */
.list {
  padding: 0 20rpx;
  margin-bottom: 20rpx;
  border-radius: 20rpx;
  background-color: #F5F5F5 ;
  position: relative;
  .item {
    line-height: 90rpx;
    padding-left: 10rpx;
    font-size: 35rpx;
    color: rgb(20,141,255);
    border-top: 1rpx solid #F5F5F5 ;
    border-radius: 0;
    background-color: #F5F5F5 ;
    .icon-shu{
      margin-right: 35rpx;
      margin-left: 35rpx;
      font-size: 50rpx;
    }
     .icon-circle-right{
      position: absolute;
      font-size: 50rpx;
      right: 60rpx;
    }
  }
}
}
</style>